<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贴吧信息</title>
    <style>
        .warning-row {
            background: oldlace;
        }

        .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-button type="primary" plain @click="goToChange">切换账号</el-button>
        <el-button type="primary" plain @click="goToNewPage">查看我关注的贴吧</el-button>
        <el-button type="primary" plain @click="goToSeeMyLike">我点赞过的帖子</el-button>
    </el-row>
    <h2>欢迎您,以下是本贴吧和置顶贴的信息</h2>
    <el-row>
        <el-button type="primary" plain @click="changeMyFocus">{{ isFollowed ? '取关@_@' : '关注我^_^' }}</el-button>
        <el-button type="primary" plain @click="OpenPage">发帖</el-button>
    </el-row>
    <template>
        <el-table
                :data="this.Bar"
                style="width: 100%"
        >
            <el-table-column
                    prop="id"
                    label="序号"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="barName"
                    label="贴吧名"
                    align="center"
            >

            </el-table-column>

            <el-table-column
                    prop="nowNumber"
                    label="现关注人数"
                    align="center"
            >
            </el-table-column>

            <el-table-column
                    prop="ownerName"
                    label="吧主"
                    align="center"
            >
            </el-table-column>

            <el-table-column
                    prop="created_at"
                    label="创建时间"
                    align="center"
            >
            </el-table-column>

        </el-table>
    </template>

    <template>
        <el-table
                :data="this.pinPost"
                style="width: 100%"
        >
            <el-table-column
                    prop="id"
                    label="序号"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="发布人姓名"
                    align="center"
            >

            </el-table-column>

            <el-table-column
                    prop="likeNumber"
                    label="现点赞人数"
                    align="center"
            >
            </el-table-column>

            <el-table-column
                    prop="context"
                    label=”内容“
                    align="center"
            >
            </el-table-column>

            <el-table-column
                    prop="created_at"
                    label="创建时间"
                    align="center"
            >
            </el-table-column>

        </el-table>
    </template>

    <h2>以下是帖子，也来发布一条你的帖子吧^_^</h2>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="name" label="myName" align="center"></el-table-column>
        <el-table-column prop="context" label="内容" align="center"></el-table-column>
        <el-table-column prop="likeNumber" label="点赞数" align="center"></el-table-column>
        <el-table-column prop="created_at" label="创建时间" align="center" ></el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-row>
                    <el-button type="danger" @click="goToCommentHtml(scope.row)">查看评论</el-button>
                    <el-button type="danger" @click="StartUpdate(scope.row)">编辑</el-button>
                    <el-button type="danger" @click="startDelete(scope.row)">删帖</el-button>
                </el-row>
            </template>
        </el-table-column>
    </el-table>
    <el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column
                prop="id"
                v-if="false"
                label="序号"
                align="center"
        ></el-table-column>
        <el-table-column prop="name" label="其他用户" align="center"></el-table-column>
        <el-table-column prop="context" label="内容" align="center"></el-table-column>
        <el-table-column prop="likeNumber" label="点赞人数" align="center"></el-table-column>
        <el-table-column prop="created_at" label="创建时间" align="center" ></el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-row>
                    <el-button type="primary" @click="goToCommentHtml(scope.row)">查看评论</el-button>
                    <el-button type="primary" @click="addFavor(scope.row)">点赞</el-button>
                    <el-button type="danger" @click="addDisLike(scope.row)">差评</el-button>
                    <el-button type="danger" @click="openReportlog(scope.row)">举报Ta</el-button>
                </el-row>
            </template>
        </el-table-column>

    </el-table>
    <!-- 分页工具条 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination>

    <el-dialog
            title="删帖确认框"
            :visible.sync="deleteDialogVisible"
            width="30%"
    >

        <el-form ref="updateForm" :model="post" label-width="80px">
            <el-input v-model="post.id" type="hidden"></el-input>
            <el-form-item label="我的昵称">
                <el-input disabled v-model="post.name"></el-input>
            </el-form-item>

            <el-form-item label="发布的贴吧名">
                <el-input disabled v-model="post.barName"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <el-input disabled v-model="post.context"></el-input>
            </el-form-item>
            <el-form-item label="喜欢的人数">
                <el-input disabled v-model="post.likeNumber"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="deleteMyPost">同意</el-button>
                <el-button @click="deleteDialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <el-dialog title="发帖" :visible.sync="dialogVisible" width="40%">
        <el-form ref="form" :model="post" label-width="80px">
            <el-form-item label="内容">
                <el-input  v-model="post.context" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addPost">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--修改表格-->
    <el-dialog title="编辑教帖子息" :visible.sync="UpdateDialogVisible" width="40%">
        <el-form ref="form" :model="post" label-width="80px">
            <el-form-item label="序号">
                <el-input disabled type="id" v-model="post.id" ></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <el-input v-model="post.context" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="updatePost">提交</el-button>
                <el-button @click="UpdateDialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog title="增加举报" :visible.sync="Reportlog" width="40%">
        <el-form ref="form" :model="report" label-width="80px">
            <el-form-item label="内容">
                <el-input  v-model="report.reason" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addReport">提交</el-button>
                <el-button @click="Reportlog = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
    const query = location.search;
    new Vue({
        el: "#app",
        data() {
            return {
                dialogVisible:false,
                Reportlog:false,
                pinPost:{
                    name:'',
                    id:'',
                    context:'',
                    likeNumber:'',
                    created_at:'',
                    barId:'',
                    barName:''
                },
                post:{
                    name:'',
                    id:'',
                    context:'',
                    likeNumber:'',
                    created_at:'',
                    barId:'',
                    barName:''
                },

                favor:{
                    id:'',
                    userName:'',
                    postId:'',
                    barName:''
                },
                report:{
                    id:'',
                    userName:'',
                    barName:'',
                    reason:'',
                    postId:'',
                    context:''
                },

                Bar:[],
                totalCount: 1,
                pageSize: 5,
                currentPage: 1,
                tableData: [],
                tableData2:[],
                isFollowed: true,
                likedPostIds: [],
                updateDialogVisible:false,
                refuseDialogVisible:false,
                deleteDialogVisible:false,
                UpdateDialogVisible:false,

            }
        },
        mounted() {
            this.selectInfo();
            this.selectAllPosts();
            this.selectOutOfMyPosts();
            this.selectHasFocus();
            this.selectPinPost();
        },
        methods: {
            changeMyFocus(){
                if(this.isFollowed === true){
                    axios.post("http://localhost:8080/BarSystem/Bar/deleteFocus" + location.search)
                        .then((resp) => {
                            if (resp.data === "success") {
                                this.$message({
                                    message: '已经取消关注了',
                                    type: 'success'
                                });
                                this.isFollowed = false;
                                this.selectInfo();


                            }
                        })
                        .catch((error) => {
                            console.error(error);
                        });
                }else{
                    axios.post("http://localhost:8080/BarSystem/Bar/addFocus" + location.search)
                        .then((resp) => {
                            if (resp.data === "success") {
                                this.$message({
                                    message: '感谢您的关注',
                                    type: 'success'
                                });
                                this.isFollowed = !this.isFollowed;
                                this.selectInfo();

                            }
                        })
                        .catch((error) => {
                            console.error(error);
                        });
                }

            },
            selectHasFocus(){
                axios.get("http://localhost:8080/BarSystem/Bar/hasFocus" + location.search)
                    .then((resp) => {
                        if (resp.data === "yes") {
                            this.isFollowed = true;
                        }
                        else{
                            this.isFollowed = false;
                        }
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            },

            selectInfo(){
                var _this=this
                axios({
                    method:"get",
                    url:"http://localhost:8080/BarSystem/Bar/selectOne"+query,
                    data:_this.Bar,

                }).then(function (resp){
                    _this.Bar=[];
                    _this.Bar.push(resp.data)

                })
            },
            selectAllPosts(){
                var _this=this
                axios({
                    method:"get",
                    url:"http://localhost:8080/BarSystem/Bar/selectAllMyPosts"+query,
                    data:_this.tableData,

                }).then(resp => {
                    _this.tableData = [];
                    if (typeof resp.data === 'object' && resp.data!== null){
                        _this.tableData.push(resp.data);}else{
// 使用split方法将字符串按照"}"分割成数组
                        const responseDataArray = resp.data.split('}').map(item => {
                            if (item) return JSON.parse(item + '}');
                            else return null;
                        }).filter(item => item !== null);

// 根据数组长度判断是否为单个对象或多个对象组成的数组
                        if (responseDataArray.length === 1) {
                            // 如果数组长度为1，则直接解析JSON数据
                            _this.tableData = responseDataArray[0];
                        } else {
                            // 如果数组长度大于1，则将整理后的数据添加到tableData中
                            _this.tableData = _this.tableData.concat(responseDataArray);
                        }}
                })
                    .catch(error => {
                        console.error('Error fetching data', error);
                    });
            },

            selectOutOfMyPosts(){
                var _this=this
                axios({
                    method:"get",
                    url:"http://localhost:8080/BarSystem/Bar/selectOutOfMyPosts"+query,
                    data:_this.tableData2,

                }).then(resp => {
                    _this.tableData2 = [];
                    if (typeof resp.data === 'object' && resp.data!== null){
                        _this.tableData2.push(resp.data);}else{
// 使用split方法将字符串按照"}"分割成数组
                        const responseDataArray = resp.data.split('}').map(item => {
                            if (item) return JSON.parse(item + '}');
                            else return null;
                        }).filter(item => item !== null);

// 根据数组长度判断是否为单个对象或多个对象组成的数组
                        if (responseDataArray.length === 1) {
                            // 如果数组长度为1，则直接解析JSON数据
                            _this.tableData2 = responseDataArray[0];
                        } else {
                            // 如果数组长度大于1，则将整理后的数据添加到tableData中
                            _this.tableData2 = _this.tableData2.concat(responseDataArray);
                        }}
                })
                    .catch(error => {
                        console.error('Error fetching data', error);
                    });
            },
            goToNewPage() {
                window.location.href = 'User.html'+location.search;
            },
            goToChange() {
                window.location.href = 'login.jsp';
            },
            tableRowClassName({rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            handleSizeChange(val) {
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.currentPage = val;

            },

            unFollow(row) {
                // 实现取消关注的逻辑
                // 可以通过axios向后端发送请求来处理
                console.log('取消关注', row);
            },
            addDisLike(row) {
                const postId =row.id ;

                //var _this = this;
                this.$confirm('是否继续给这个帖子差评?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {  //确认之后执行axios请求
                    axios({
                        method: "post",
                        url: "http://localhost:8080/BarSystem/Post/addDisFavor"+location.search+"&postId="+postId,
                    }).then(resp => {
                        if (resp.data === "success") {
                            //录入成功，关闭窗口,并且重新查询数据
                            this.selectOutOfMyPosts();
                            this.$message({
                                message: '成功添加',
                                type: 'success'
                            });
                        }else {
                            this.selectOutOfMyPosts();
                            this.$message({
                                message: '您之前已经添加过了',
                                type: 'error'
                            });
                        }
                    })

                }).catch(() => { //取消之后执行标签
                    this.$message({
                        type: 'info',
                        message: '已取消差评'
                    });
                });
            },
            addFavor(row) {
                const postId =row.id ;

                //var _this = this;
                this.$confirm('是否继续给这个帖子点赞?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {  //确认之后执行axios请求
                    axios({
                        method: "post",
                        url: "http://localhost:8080/BarSystem/Post/likePost"+location.search+"&postId="+postId,
                    }).then(resp => {
                        if (resp.data === "success") {
                            //录入成功，关闭窗口,并且重新查询数据
                            this.selectOutOfMyPosts();
                            this.$message({
                                message: '成功点赞',
                                type: 'success'
                            });
                        }else {
                            this.selectOutOfMyPosts();
                            this.$message({
                                message: '您之前已经点赞过了',
                                type: 'error'
                            });
                        }
                    })

                }).catch(() => { //取消之后执行标签
                    this.$message({
                        type: 'info',
                        message: '已取消点赞'
                    });
                });
            },
            deleteMyPost() {
                console.log(this.post);
                var _this=this
                axios({
                    method:"post",
                    url: "http://localhost:8080/BarSystem/Post/deleteMyPost",
                    data:_this.post,
                }).then(resp => {
                    if (resp.data === "success") {
                        //录入成功，关闭窗口,并且重新查询数据
                        this.$message({
                            message: '成功删帖',
                            type: 'success'
                        });
                        this.deleteDialogVisible=false;
                        this.selectAllPosts();
                    }
                })
            },

            startDelete(row) {
                // 获取改行已经有的数据，以供填入修改框
                var _this = this
                _this.post = JSON.parse(JSON.stringify(row));
                _this.deleteDialogVisible= true;
            },
            OpenPage() {

                this.dialogVisible = true;
            },
            openReportlog(row) {
                var _this = this
                _this.post = JSON.parse(JSON.stringify(row));
                this.Reportlog = true;
            },
            addPost() {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/BarSystem/Post/addPost" + location.search, // 确保URL路径正确
                    data: _this.post,
                })
                    .then((resp) => {
                        if (resp.data === "success") {
                            this.$message({
                                message: '恭喜你。成功发布一条帖子',
                                type: 'success'
                            });
                            this.dialogVisible = false;
                            this.selectAllPosts();
                        }else {
                            this.$message({
                                message: '抱歉，您被吧主拉黑了',
                                type: 'warning'
                            });
                            this.dialogVisible = false;
                        }
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            },
            goToSeeMyLike(){
                window.location.href = 'Comment.html'+location.search;

            },
            goToCommentHtml(row){
                this.post = JSON.parse(JSON.stringify(row));
                //var _this = this;
                this.$confirm('是否前往查看该贴子的相关评论', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {  //确认之后执行axios请求
                    axios({
                        method: "post",
                        url: "http://localhost:8080/BarSystem/Post/goToCommentHtml"+location.search,
                        data: this.post
                    }).then(resp => {
                        window.location.href = resp.data;
                    })

                }).catch(() => { //取消之后执行标签
                    this.$message({
                        type: 'info',
                        message: '已取消点赞'
                    });
                });
            },
            StartUpdate(row){
                var _this = this
                _this.post = JSON.parse(JSON.stringify(row));
                _this.UpdateDialogVisible= true;
            },
            updatePost(){
                var _this=this
                axios({
                    method:"post",
                    url: "http://localhost:8080/BarSystem/Post/updatePost",
                    data:_this.post,
                }).then(resp => {
                    if (resp.data === "success") {
                        //录入成功，关闭窗口,并且重新查询数据
                        this.selectAllPosts();
                        this.UpdateDialogVisible=false;
                        this.$message({
                            message: '成功修改',
                            type: 'success'
                        });
                    }
                })

            },
            selectPinPost(){
                var _this=this
                axios({
                    method:"get",
                    url:"http://localhost:8080/BarSystem/Bar/selectPinPost"+query,
                    data:_this.pinPost,

                }).then(function (resp){
                    _this.pinPost=[];
                    _this.pinPost.push(resp.data)

                })
            },
            addReport(){
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/BarSystem/Bar/addReport" + location.search+"&postId="+_this.post.id, // 确保URL路径正确
                    data: _this.report,
                })
                    .then((resp) => {
                        if (resp.data === "success") {
                            this.$message({
                                message: '成功添加一则举报',
                                type: 'success'
                            });
                            this.Reportlog = false;
                        }else {
                            this.$message({
                                message: '抱歉，您已经举报过了',
                                type: 'warning'
                            });
                            this.Reportlog = false;
                        }
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            }




        }
    });
</script>
</body>
</html>